import 'dart:ui';

import 'package:flutter/material.dart';

class Widget_BackdropFilter_Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("BackdropFilter"),
          ),
          body: Container(
            width: 500,
            height: 500,
            color: Colors.green,
            child: Stack(
              children: <Widget>[
                Container(
                  width: 400,
                  height: 400,
                  color: Colors.red,
                ),
                Image.network(
                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3454574876,1377139334&fm=27&gp=0.jpg",
                  width: 300,
                  height: 300,
                ),
                BackdropFilter(
                  //sigmaX和sigmaY分别设置了x和y方向的模糊程度,数值越大模糊度越高
                  filter: ImageFilter.blur(sigmaX: 11, sigmaY: 11),
                  child: Container(
                      width: 300,
                      height: 300,
                      child: Center(
                        child: Image.network(
                          "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3454574876,1377139334&fm=27&gp=0.jpg",
                          width: 80,
                          height: 80,
                        ),
                      )
                  ),
                )
              ],
            ),
          )
      ),
    );
  }
}

/**
 * 高斯模糊，会将下面所有的内容都给模糊掉，
 * const BackdropFilter({
    Key key,
    @required this.filter, //设置模糊程度
    Widget child,
    })
 */
